<template>
  <el-aside style="background-color: #090707; width: auto">
    <el-menu
      :default-openeds="['1', '3']"
      background-color="#011638"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="isCollapse"
    >
      <el-submenu index="1">
        <template v-slot:title>
          <i class="el-icon-menu"></i>
          <span class="spantitle">主菜单</span>
        </template>
        <!-- <template class="spantitle"><i class="el-icon-menu"></i>主菜单</template> -->
        <el-menu-item-group>
          <span class="spantitle">导航</span>
          <!-- <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item> -->

          <router-link to="/mainenu/userlist">
            <el-menu-item index="1-1"
              ><i class="el-icon-user"></i>用户</el-menu-item
            ></router-link
          >
          <a
            target="_blank"
            href="https://element-plus.gitee.io/#/zh-CN/component/installation"
          >
            <el-menu-item index="1-2"
              ><i class="el-icon-view"></i>Element Plus基于 Vue 3.0
              的桌面端组件库</el-menu-item
            ></a
          >
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span class="spantitle">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span class="spantitle">导航三</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<style scoped>
/* .el-aside {
  color: #333;
} */
.el-menu {
  border-right: solid 1px #090707;
}
</style>
<script>
export default {
  props: {
    //从父组件传递过来的数据
    CollapseWidth: {
      type: Number, //Object是对象，String是字符串，Array是数组
      default: 900,
    },
  },

  data() {
    return {
      isCollapse: false,
      screenWidth: "",
      screenHeight: "",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    setMenu() {
      if (this.screenWidth < this.CollapseWidth) {
        this.isCollapse = true;
      } else {
        this.isCollapse = false;
      }
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.screenHeight = document.body.clientHeight;
    this.setMenu();
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
        this.screenHeight = document.body.clientHeight;
        this.setMenu();
      })();
    };
  },
};
</script>
